<template>
  <div>
    <nav-bar :title="title" />

    <div class="content" v-html="content"></div>

  </div>
</template>
<script>

import { getWords } from '@/api/user'

export default {
  data() {
    return {
      content:'',
      title:'',
      wordList:[]
    }
  },
  async created() {
    console.log(this.$route)
    const { type } = this.$route.params
    
    await this.getWordsData(type)
    console.log(this.type)
  },
  methods: {
    goLogin() {
      this.$router.back(0)
    },
    async getWordsData(id) {
      const res = await getWords()
      if (res && res.map && res.map.words) {
        this.wordList = res.map.words
        const word = res.map.words.filter((item) => {
          return item.id == id
        })
        if (!word.length) return
        console.log('this.id:', this.id, word)
        this.content = word[0].wordContent
        this.title = word[0].wordName
        console.log(this.content )
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.top{
    width:100%;
    height:60px;
    display:flex;
    align-items:center;
    padding-left:24px;
    border-bottom:1px solid #6e6e6e60;
    background: #fff;
    position:fixed;
    top:0;
    left:0;
    right:0;

    .title{
        margin-left:50px;
    }
}
.content{
  width: 92%;
  margin: 0 auto;
  margin-top: 10px;
  padding-top: 10px;
}
</style>
<style>
strong{
  font-weight: bold;
}
p{
  /* margin-top: 10px; */
  line-height: 40px;
}
</style>
